<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>欢迎来到我的第一个仓库</title>
    <style>
        /* 原有样式保持不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: fadeIn 2s ease-in-out;
        }

        .container {
            text-align: center;
            max-width: 1000px;
            padding: 20px;
        }

        h1 {
            font-size: 3rem;
            line-height: 1.4;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 1rem;
        }

        /* 游戏容器样式 */
        .game-container {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        #gameCanvas {
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            max-width: 100%;
        }

        .game-controls {
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .control-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .mobile-controls {
            display: none;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .direction-btn {
            padding: 15px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            .mobile-controls {
                display: grid;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>欢迎来到我的第一个仓库！</h1>
    <div id="counter">总访问次数：<span>${count}</span></div>

    <!-- 新增游戏容器 -->
    <div class="game-container">
        <div style="margin-bottom: 15px">
            <span>得分：</span>
            <span id="score">0</span>
        </div>
        <canvas id="gameCanvas"></canvas>
        <div class="game-controls">
            <button class="control-btn" id="startBtn">开始游戏</button>
            <button class="control-btn" id="resetBtn">重新开始</button>
        </div>
        <div class="mobile-controls">
            <div></div>
            <button class="direction-btn" id="upBtn">↑</button>
            <div></div>
            <button class="direction-btn" id="leftBtn">←</button>
            <button class="direction-btn" id="downBtn">↓</button>
            <button class="direction-btn" id="rightBtn">→</button>
        </div>
    </div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const startBtn = document.getElementById('startBtn');
    const resetBtn = document.getElementById('resetBtn');
    const scoreElement = document.getElementById('score');

    // 游戏参数
    let snake = [];
    let food = {};
    let direction = 'right';
    let score = 0;
    let gameLoop;
    const gridSize = 20;
    const tileCount = 20;

    function initGame() {
        // 设置画布尺寸
        const containerWidth = document.querySelector('.game-container').offsetWidth;
        canvas.width = Math.min(containerWidth - 40, 400);
        canvas.height = canvas.width;

        // 初始化蛇
        snake = [{x: 5, y: 5}];
        direction = 'right';
        score = 0;
        scoreElement.textContent = score;
        createFood();
    }

    function createFood() {
        food = {
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount)
        };
    }

    function drawGame() {
        // 清空画布
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制蛇
        ctx.fillStyle = '#4ade80';
        snake.forEach((segment, index) => {
            const size = canvas.width / tileCount;
            ctx.fillRect(segment.x * size, segment.y * size, size - 2, size - 2);
        });

        // 绘制食物
        ctx.fillStyle = '#f87171';
        const foodSize = canvas.width / tileCount;
        ctx.fillRect(food.x * foodSize, food.y * foodSize, foodSize - 2, foodSize - 2);
    }

    function moveSnake() {
        const head = {...snake[0]};

        switch(direction) {
            case 'up': head.y--; break;
            case 'down': head.y++; break;
            case 'left': head.x--; break;
            case 'right': head.x++; break;
        }

        // 碰撞检测
        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
            gameOver();
            return;
        }

        snake.unshift(head);

        // 吃到食物
        if (head.x === food.x && head.y === food.y) {
            score += 10;
            scoreElement.textContent = score;
            createFood();
        } else {
            snake.pop();
        }
    }

    function gameOver() {
        clearInterval(gameLoop);
        alert(`游戏结束！得分：${score}`);
        startBtn.textContent = "开始游戏";
    }

    // 事件监听
    document.addEventListener('keydown', (e) => {
        switch(e.key) {
            case 'ArrowUp': if (direction !== 'down') direction = 'up'; break;
            case 'ArrowDown': if (direction !== 'up') direction = 'down'; break;
            case 'ArrowLeft': if (direction !== 'right') direction = 'left'; break;
            case 'ArrowRight': if (direction !== 'left') direction = 'right'; break;
        }
    });

    // 移动端控制
    document.getElementById('upBtn').addEventListener('touchstart', () => direction = 'up');
    document.getElementById('downBtn').addEventListener('touchstart', () => direction = 'down');
    document.getElementById('leftBtn').addEventListener('touchstart', () => direction = 'left');
    document.getElementById('rightBtn').addEventListener('touchstart', () => direction = 'right');

    startBtn.addEventListener('click', () => {
        if (!gameLoop) {
            gameLoop = setInterval(() => {
                moveSnake();
                drawGame();
            }, 150);
            startBtn.textContent = "暂停游戏";
        } else {
            clearInterval(gameLoop);
            gameLoop = null;
            startBtn.textContent = "继续游戏";
        }
    });

    resetBtn.addEventListener('click', () => {
        clearInterval(gameLoop);
        gameLoop = null;
        startBtn.textContent = "开始游戏";
        initGame();
        drawGame();
    });

    // 初始化游戏
    initGame();
    drawGame();

    // 窗口大小变化时重置游戏
    window.addEventListener('resize', initGame);
</script>
</body>
</html>